<template>
	<view class="bigBox">
		<view class="topMenu">
			<view class="" @click="goToPage('order')">
				<view class="">订单</view>
				<view class="hr"></view>
			</view>
			<view class="check">
				<view class="">售后订单</view>
				<view class="hr"></view>
			</view>
		</view>
		<!-- 二期需求 -->
		<view class="tabsContent">
			<u-tabs :list="companyList" name="companyShortName" :is-scroll="false" :current="current"
				@change="tabsChange" font-size="30" :bold="false" active-color="#f5914f" :active-item-style="{
					color: '#f5914f',
					fontSize: '34rpx'
				}"></u-tabs>
		</view>
		<!-- 二期需求 -->
		<view class="orderList" v-for="(item, index) in orderList" :key="index">
			<!-- <view class="name"> -->
			<!-- <view class="">
					<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/shopLi.png" mode="">
					</image>
					{{item.storeName}}
				</view> -->
			<!-- <view class=""></view> -->
			<!-- <view class="controlBox" :class="{'isControlCheck':item.controlIsCheck}"
					@click="changeControlState(index,item)" v-if="item.state=='未处理'">
					<view class="control">
						<view>操作</view>
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode="">
						</image>
					</view>
					<view class="">
						<view class="checkControl" @click.stop="clickControlMenu(index,'refund')">售后退款</view>
						<view class="checkControl" @click.stop="clickControlMenu(index,'reject')">驳回</view>
					</view>
				</view> -->
			<!-- </view> -->
			<view class="">
				<view class="">
					序号:
					<text>{{ item.hcOrderMerchant.pickingSerialNo }}</text>
				</view>
				<view class="">
					姓名:
					<text>{{ item.hcOrderMerchant.nameTakingMeal }}</text>
				</view>
				<!-- <view class="">地址: <text>{{item.hcOrderMerchant.pickingAddress}}</text></view> -->
			</view>
			<view class="">
				<view class="">
					菜品名称:
					<text>{{ item.nameDishes }}</text>
				</view>
			</view>
			<!-- <view class="">

				<view class="">消费金额: <text>{{item.totalPrice}}元</text></view>
			</view> -->
			<view class="">
				<view class="">
					餐品问题:
					<text v-if="current==0">{{ item.foodProblems.split('：')[0] }}</text>
					<text v-else>{{ item.foodProblems.split('（')[0]}}</text>
				</view>
			</view>
			<view class="">
				<view class="">
					投诉建议:
					<text>{{ item.feedback ? item.feedback : '无' }}</text>
				</view>
			</view>
			<view class="imgContent">
				<view class="">餐品图片:</view>
				<!-- <image :src="imgItem|getImg" mode="" v-for="(imgItem,index) in item.picture" :key="index"></image> -->
				<view class="imgBox">
					<image :src="imgItem | getImg" mode="" v-for="(imgItem, idx) in item.picture" :key="idx"
						@click="showBigImageLayer(imgItem)"></image>
				</view>
			</view>
			<!-- <view class="w50">
				<view class="">处理状态: <text>{{item.state}}</text></view>
				<view class="" v-if="item.state=='已处理'">退款金额: <text>{{item.refundAmount}}元</text></view>
			</view> -->
			<view class="">
				<view class="">
					提交时间:
					<text>{{ item.createTime }}</text>
				</view>
			</view>
			<!-- v-if="item.state=='已处理'" -->
			<view class="" v-if="item.state != '未处理'">
				<view class="">
					处理时间:
					<text>{{ item.updateTime }}</text>
				</view>
			</view>
			<!-- <view class="" v-if="item.state=='已处理'">
				<view class="">退款金额: <text>￥{{item.refundAmount?item.refundAmount:'0'}}</text></view>
			</view> -->
			<view class="" v-if="item.state == '已处理'">
				<view class="">
					扣除商家金额:
					<text>￥{{ item.deductMerchantAmount ? item.deductMerchantAmount : '0' }}</text>
				</view>
			</view>
			<view class="" v-if="item.state == '已处理'">
				<view class="">
					扣款备注:
					<text>{{ item.deductionRemarks ? item.deductionRemarks : '无' }}</text>
				</view>
			</view>
			<view class="" v-if="item.state == '已驳回'">
				<view class="">
					驳回原因:
					<text>{{ item.reasonRejection?item.reasonRejection:'无' }}</text>
				</view>
			</view>
			<view class="">
				<view class="">
					门店累计出现投诉次数:
					<text>{{ item.complaintCount }}次</text>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="0"></CommenFooter>
		<u-popup v-model="refundShow" mode="center" :closeable="true">
			<view class="refundContent">
				<view class="title">售后退款</view>
				<view class="writeLi">
					<view class="">退款金额</view>
					<u-input placeholder="请输入退款金额" type="text" v-model="returnInfo.refundAmount"></u-input>
				</view>
				<view class="writeLi">
					<view class="">扣除商家金额</view>
					<u-input placeholder="请输入扣除商家金额" type="text" v-model="returnInfo.deductMerchantAmount"></u-input>
				</view>
				<view class="writeLi">
					<view class="">备注</view>
					<u-input placeholder="请输入备注" type="textarea" :auto-height="true" height="100"
						v-model="returnInfo.deductionRemarks"></u-input>
				</view>
				<view class="commenButton" @click="hideRefund">确定</view>
			</view>
		</u-popup>
		<u-popup v-model="rejectShow" mode="center" :closeable="true">
			<view class="refundContent">
				<view class="title">驳回</view>
				<view class="writeLi">
					<view class="">驳回原因</view>
					<u-input placeholder="请输入驳回原因" type="textarea" v-model="rejectReason" :auto-height="true"
						height="100"></u-input>
				</view>
				<view class="commenButton" @click="refund">确定</view>
			</view>
		</u-popup>

		<u-popup v-model="showBigImage" mode="left" width='100%' height="100%" :closeable="true">
			<image class='big-image' :src="bigImageUrl | getImg" mode="" @click="showBigImage=false"></image>
		</u-popup>
		<!-- <view class="delOrder">
			<u-popup v-model="deleteShow" mode="center" :closeable="true">
				<view class="refundContent deleteContent">
					<view class="title">取消订单</view>
					<view class="text">确认取消订单吗？</view>
					<view class="control">
						<view class="" @click="deleteCancel">取消</view>
						<view class="" @click="deleteSubmit">确认</view>
					</view>
				</view>
			</u-popup>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getAfterSalesList,
		editAfterSaleOrder,
		getAfterSalesWithCompany
	} from '@/utils/req/api.js';
	import CommenFooter from '@/components/footer/footer.vue';
	import {
		mapActions,
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			CommenFooter
		},
		data() {
			return {
				options1: [{
						label: '默认排序',
						value: 1
					},
					{
						label: '距离优先',
						value: 2
					},
					{
						label: '价格优先',
						value: 3
					}
				],
				orderList: [],

				refundShow: false,
				refundIndex: '',
				deleteShow: false,
				deleteIndex: '',
				rejectShow: false,
				rejectIndex: false,
				clickOrderInfo: '', //点击的订单信息
				//退款时的信息
				returnInfo: {
					refundAmount: '',
					deductMerchantAmount: '',
					deductionRemarks: ''
				},
				rejectReason: '',
				pageSize: 10,
				pageNo: 1,
				moreFlag: false,
				showBigImage: false,
				bigImageUrl: '',

				current: 0,
				requestFlag: false
			};
		},
		mounted() {
			this.getAfterSalesList();
			this._getCompanyList('afterOrder');
		},
		computed: {
			...mapState('commonModule', ['companyList'])
		},
		onShow() {
			console.log('!!!!!!!!!!!!!!!!!', this.companyList);
		},
		methods: {
			...mapActions('commonModule', ['_getCompanyList']),
			//获取售后订单信息
			async getAfterSalesList() {
				this.requestFlag = true;
				let res;
				if (this.current === 0) {
					res = await getAfterSalesList({
						pageSize: this.pageNo * this.pageSize,
						pageNo: 1
					});
				} else {
					res = await getAfterSalesWithCompany({
						pageSize: this.pageNo * this.pageSize,
						pageNo: 1,
						merchantId: uni.getStorageSync('myInfo').id,
						companyId: uni.getStorageSync('companyId')
					});
				}
				this.requestFlag = false;
				console.log('!!!!!!', res.data.result.records);
				if (res.data.result.records) {
					res.data.result.records.forEach(item => {
						item.picture = item.picture.split(',');
						item.controlIsCheck = false;
					});
					this.orderList = res.data.result.records;
				}
			},
			goToPage(type) {
				let url;
				if (type == 'order') {
					url = '/pages/index/index';
				} else {
					url = '/pages/index/afterOrder';
				}
				uni.reLaunch({
					url
				});
			},
			// 弹窗大图片
			showBigImageLayer(url) {
				this.bigImageUrl = url;
				this.showBigImage = true;
			},
			changeControlState(index, value) {
				this.clickOrderInfo = value;
				this.orderList[index].controlIsCheck = !this.orderList[index].controlIsCheck;
			},
			clickControlMenu(index, type) {
				if (type == 'refund') {
					this.refundShow = true;
					this.refundIndex = index;
				} else if (type == 'delete') {
					this.deleteShow = true;
					this.deleteIndex = index;
				} else if (type == 'reject') {
					this.rejectShow = true;
					this.rejectIndex = index;
				}
				this.orderList[index].controlIsCheck = !this.orderList[index].controlIsCheck;
			},
			//确认退款
			async hideRefund() {
				let {
					refundAmount,
					deductMerchantAmount,
					deductionRemarks
				} = this.returnInfo;
				if (!refundAmount || isNaN(Number(refundAmount))) {
					this.$showToast.call(this, '请输入正确的扣款金额', 'warning');
					return;
				}
				if (!deductMerchantAmount || isNaN(Number(deductMerchantAmount))) {
					this.$showToast.call(this, '请输入正确的扣款商家金额', 'warning');
					return;
				}
				this.clickOrderInfo.picture = this.clickOrderInfo.picture.join(',');
				this.clickOrderInfo.refundAmount = refundAmount;
				this.clickOrderInfo.deductMerchantAmount = deductMerchantAmount;
				this.clickOrderInfo.deductionRemarks = deductionRemarks;
				this.clickOrderInfo.state = '已处理';
				let res = await editAfterSaleOrder(this.clickOrderInfo);
				if (res.data.success) {
					this.$showToast.call(this, '退款成功');
					this.getAfterSalesList();
					this.refundShow = false;
				} else {
					this.$showToast.call(this, res.data.message, 'warning');
				}
			},
			async refund() {
				if (!this.rejectReason) {
					this.$showToast.call(this, '请输入驳回售后的原因', 'warning');
					return;
				}
				this.clickOrderInfo.picture = this.clickOrderInfo.picture.join(',');
				this.clickOrderInfo.state = '已驳回';
				this.clickOrderInfo.reasonRejection = this.rejectReason;
				let res = await editAfterSaleOrder(this.clickOrderInfo);
				if (res.data.success) {
					this.$showToast.call(this, '已驳回该订单');
					this.getAfterSalesList();
					this.rejectShow = false;
				} else {
					this.$showToast.call(this, res.data.message, 'warning');
				}
			},
			//删除订单--取消删除
			// deleteCancel() {
			// 	this.deleteShow = false
			// },
			//删除订单--确认删除
			// deleteSubmit() {
			// 	this.deleteShow = false
			// }

			//二期需求
			tabsChange(e) {
				console.log('e', e);
				if (this.requestFlag) {
					this.$showToast.call(this, '数据正在加载中，请稍等...', 'warning');
					return;
				}
				this.current = e;
				if (this.current !== 0) {
					uni.setStorageSync('companyId', this.companyList[this.current].id);
				}
				this.getAfterSalesList();
			}
			//二期需求
		},
		onReachBottom() {
			if (!this.moreFlag) {
				if (this.orderList.length != 0 && this.orderList.length % this.pageSize == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreFlag = true;
					this.getAfterSalesList();
					setTimeout(() => {
						this.moreFlag = false;
					}, 1000);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bigBox {
		background-color: #f5f5f5;
		padding-bottom: 200rpx;
		min-height: 100vh;
	}

	.topMenu {
		padding: 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		@include flexs(flex-start, flex-start);

		>view {
			margin-right: 30rpx;
			font-size: 40rpx;
			line-height: 56rpx;
			color: rgba(0, 0, 0, .35);
			// font-weight: bold;

			>view:nth-child(2) {
				width: 40rpx;
				height: 8rpx;
				background: #f1b825;
				margin-top: 10rpx;
				display: none;
			}
		}

		>.check {
			color: #000;

			>view:nth-child(2) {
				display: block;
			}
		}
	}

	.big-image {
		width: 100%;
		height: 100%;
	}

	.top {
		padding: 20rpx;
		@include flexs(space-between, center);
		background-color: #fff;

		>view {
			@include flexs();

			&:nth-child(1) {
				font-size: 28rpx;
				line-height: 40rpx;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}

				margin-right: 40rpx;
			}

			&:nth-child(2) {
				flex: 1;
				margin-left: 20rpx;
				@include flexs();

				image {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 10rpx;
					top: 5rpx;
				}

				border-radius: 50rpx;
				border: 1px solid #f5f5f5;
				position: relative;
				overflow: hidden;

				/deep/.u-input__input {
					font-size: 28rpx;
					line-height: 60rpx;
					height: 60rpx;
					min-height: auto !important;
					text-indent: 60rpx;
					background-color: #f5f5f5;
				}
			}
		}
	}

	.orderList {
		padding: 20rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		margin-top: 20rpx;

		.name {
			@include flexs(space-between, center);
			font-size: 30rpx;
			line-height: 40rpx;

			>view:nth-child(1) {
				@include flexs();
				color: #000;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
			}

			.controlBox {
				width: 200rpx;
				position: relative;
				text-align: right;

				>view:nth-child(1) {
					@include flexs(flex-end, center);
					padding: 10rpx 0;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
						transform: rotate(-90deg);
					}
				}

				>view:nth-child(2) {
					display: none;
					width: 100%;
					position: absolute;
					left: 0;
					top: 100%;
					background-color: #fff;
					box-shadow: 0 0 5px #eee;
					padding: 10rpx 10rpx;

					>view {
						border-bottom: 1px solid #eee;
						padding: 10rpx;
						text-align: center;

						&:last-child {
							border: 0;
						}
					}

					&:hover {
						>view {
							display: block;
						}
					}
				}
			}

			.isControlCheck {
				>view:nth-child(1) {
					image {
						transform: rotate(0);
					}
				}

				>view:nth-child(2) {
					display: block;
				}
			}
		}

		>view {
			@include flexs();
			font-size: 32rpx;
			flex-wrap: wrap;
			// color: rgba(0, 0, 0, 0.35);
			color: #000;
			line-height: 2;
			margin: 10rpx 0;

			>view {
				margin-right: 20rpx;

				text {
					color: #000;
					margin-left: 10rpx;
				}
			}
		}

		.special {
			>view {
				width: 50%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}

		>.w50 {
			>view {
				width: 50%;
			}
		}

		>.imgContent {
			@include flexs(flex-start, flex-start);
			flex-wrap: nowrap;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}

			.imgBox {
				flex: 1;
				@include flexs(flex-start, flex-start);
				flex-wrap: wrap;
			}
		}
	}

	.refundContent {
		.title {
			font-size: 32rpx;
			line-height: 44rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 36rpx;
		}

		.writeLi {
			margin-bottom: 34rpx;

			>view {
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: bold;
			}

			.u-input {
				background-color: #f5f5f5;
				margin-top: 20rpx;
				padding: 20rpx 32rpx !important;

				/deep/.u-input__input {
					min-height: auto !important;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				/deep/.u-input__textarea {
					min-height: 150rpx !important;
				}
			}
		}
	}

	.deleteContent {
		.title {
			font-size: 32rpx;
			line-height: 44rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 36rpx;
		}

		.text {
			font-size: 28rpx;
			line-height: 40rpx;
			color: rgba(0, 0, 0, 0.55);
			text-align: center;
		}

		.control {
			@include flexs(space-between, center);

			>view {
				width: 272rpx;
				text-align: center;
				font-size: 32rpx;
				line-height: 88rpx;
				border-radius: 100rpx;
				margin-top: 40rpx;

				&:nth-child(1) {
					border: 1px solid #eee;
				}

				&:nth-child(2) {
					background-color: #f1b825;
					color: #fff;
				}
			}
		}
	}
</style>

<style lang="scss">
	/deep/.u-model__title {
		padding-top: 0 !important;
	}

	.bigBox {
		/deep/.u-mode-center-box {
			width: 90% !important;
			max-height: 90vh;
			padding: 40rpx 36rpx;
			border-radius: 20rpx;
		}
	}

	.delOrder {
		/deep/.u-mode-center-box {
			padding: 80rpx 36rpx;
		}
	}
</style>